<template>
	<view class="container carts-list">
		<view v-for="(item, index) in carts" class="carts-container" :key="index" >
			<view class="carts-item" :style="{left: (itemLefts && itemLefts.length > 0 ? itemLefts[index] : 0) + 'px'}" :data-index="index" @touchstart="touchStart"  @touchmove="touchMove" @touchend="touchEnd">
				<!-- 复选框图标 -->
				<view @tap.stop="bindCheckbox(index)" :data-index="index" style="display: flex;align-items: center;padding-right:30rpx;">
					<uni-icons :type="item.selected ? 'checkbox-filled' : 'checkbox'" :color="item.selected ? '#48c23d' : '#bbb'" size="28" ></uni-icons>
				</view>
				<view style="padding-right:10rpx;">
				<!-- 缩略图 -->
					<image class="carts-image" :src="item.goods.pic" mode="aspectFill" @click="showGoods" :data-object-id="index"/>
				</view>
				<view class="carts-text">
					<!-- 商品标题 -->
					<text class="carts-title" @click="showGoods" :data-object-id="index">{{item.goods.title}}</text>
					<view class="carts-subtitle">
					<!-- 价格 -->
						<text class="carts-price">{{item.goods.price}}</text>
						<!-- 数量加减 -->
						<view>
						  <view class="stepper">
							<!-- 减号 -->
							<text :class="minusStatuses[index]" :data-index="index" @click.stop="bindMinus(index)">-</text>
							<!-- 数值 -->
							<input type="number" :data-index="index" @blur="bindManual(index)" @change="bindManual(index)" v-model="item.quantity" />
							<!-- 加号 -->
							<text class="normal" :data-index="index" @click.stop="bindPlus(index)">+</text>
						  </view>
						</view>
					</view>
				</view>
			</view>
			<button type="warn" class="delete-button" @tap.stop="deleteClick(index)" :data-object-id="index">删除</button>
		</view>
	</view>
	<view class="carts-footer">
		<view class="select-and-amount" @tap="bindSelectAll">
			<uni-icons :type="selectedAllStatus ? 'checkbox-filled' : 'checkbox'" :color="selectedAllStatus ? '#48c23d' : '#bbb'" size="30" style="margin-left:30rpx;"></uni-icons>
			<text>全选</text>
			<text>{{total}}</text>
		</view>
		<view class="button" @tap="bindCheckout">立即结算</view>
	</view>
</template>

<script>
	import { ref } from "vue"; // 引入响应式函数ref
	export default {
		setup() { //为一个函数
			let carts = ref([
				{selected:0, quantity: 1, goods: {pic: '/static/images/mall/img3.png', title: 'vivo Y200t手机5G轻薄6000毫安时44W闪充大内存120Hz金刚护眼屏48个月流畅', price: 101}},
				{selected:0, quantity: 1, goods: {pic: '/static/images/mall/img3.png', title: 'vivo Y200t手机5G轻薄6000毫安时44W闪充大内存120Hz金刚护眼屏48个月流畅', price: 102}},
				{selected:0, quantity: 1, goods: {pic: '/static/images/mall/img3.png', title: 'vivo Y200t手机5G轻薄6000毫安时44W闪充大内存120Hz金刚护眼屏48个月流畅', price: 103}},
				{selected:0, quantity: 1, goods: {pic: '/static/images/mall/img3.png', title: 'vivo Y200t手机5G轻薄6000毫安时44W闪充大内存120Hz金刚护眼屏48个月流畅', price: 104}},
				{selected:0, quantity: 1, goods: {pic: '/static/images/mall/img3.png', title: 'vivo Y200t手机5G轻薄6000毫安时44W闪充大内存120Hz金刚护眼屏48个月流畅', price: 105}},
				{selected:0, quantity: 1, goods: {pic: '/static/images/mall/img3.png', title: 'vivo Y200t手机5G轻薄6000毫安时44W闪充大内存120Hz金刚护眼屏48个月流畅', price: 106}},
				{selected:0, quantity: 1, goods: {pic: '/static/images/mall/img3.png', title: 'vivo Y200t手机5G轻薄6000毫安时44W闪充大内存120Hz金刚护眼屏48个月流畅', price: 107}},
			]);
			let minusStatuses = ref([]);
			let selectedAllStatus = ref(false);
			let total = ref('0.00');
			let startX = ref(0);
			let itemLefts = ref([]);
			
			const showGoods = () => {
				uni.navigateTo({
					url: '../goods/detail/detail'
				});
			}
			
			const touchStart = (e) => {
				startX.value = e.touches[0].clientX;
				itemLefts.value = [];
			}
			
			const touchMove = (e) => {
				var index = e.currentTarget.dataset.index;
				var movedX = e.touches[0].clientX;
				var distance = startX.value - movedX;
				var newItemLefts = itemLefts.value;
				newItemLefts[index] = -distance;
				itemLefts.value = newItemLefts;
			}
			
			const touchEnd = (e) => {
				var index = e.currentTarget.dataset.index;
				var endX = e.changedTouches[0].clientX;
				var distance = startX.value - endX;
				// button width is 60
				var buttonWidth = 60;
				if (distance <= 0) {
					distance = 0;
				} else {
					if (distance >= buttonWidth) {
						distance = buttonWidth;
					} else if (distance >= buttonWidth / 2){
						distance = buttonWidth;
					} else {
						distance = 0;
					}
				}
				var newItemLefts = itemLefts.value;
				newItemLefts[index] = -distance;
				itemLefts.value = newItemLefts;
			}
			
			const bindCheckbox = (index) => {

				//原始的icon状态
				var selected = carts.value[index].selected;
				var newCarts = carts.value;
				// 对勾选状态取反
				newCarts[index].selected = !selected;
				
				// 写回经点击修改后的数组
				carts.value = newCarts;
				
				sum();
			}
			
			const bindMinus = (index) => {
				var num = carts.value[index].quantity;
				// 如果只有1件了，就不允许再减了
				if (num > 1) {
					num --;
				}
				
				// 只有大于一件的时候，才能normal状态，否则disable状态
				var minusStatus = num <= 1 ? 'disabled' : 'normal';
				
				// 购物车数据
				carts.value[index].quantity = num;
				
				// 按钮可用状态
				minusStatuses.value[index] = minusStatus;
				
				sum();
			}
			
			const bindPlus = (index) => {
				var num = carts.value[index].quantity;
				// 自增
				num ++;
				// 只有大于一件的时候，才能normal状态，否则disable状态
				var minusStatus = num <= 1 ? 'disabled' : 'normal';
				// 购物车数据
				carts.value[index].quantity = num;
				// 按钮可用状态
				minusStatuses.value[index] = minusStatus;
				sum();
			}
			
			const bindManualTapped = () => {
				// 什么都不做，只为打断跳转
			}
			
			const bindManual = (index) => {
				console.log('bindManual', carts.value[index].quantity);
				sum();
			}
			
			const deleteClick = (index) => {
				var that = this;
				// 购物车单个删除
				uni.showModal({
					title: '提示',
					content: '确认要删除吗',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({title: '操作中', mask: true});
							setTimeout(() => {
								let newCarts = JSON.parse(JSON.stringify(carts.value));
								newCarts.splice(index, 1);
								carts.value = newCarts;
								itemLefts.value = [];
								uni.hideLoading();
								// 成功
								uni.showToast({
									title: '删除成功',
									icon: 'success',
									duration: 1000
								});
							}, 1000);
						}
					}
				})
			}
			
			const bindSelectAll = () => {
				// 环境中目前已选状态
				// 取反操作
				selectedAllStatus.value = !selectedAllStatus.value;
				// 购物车数据，关键是处理selected值
				var newCarts = carts.value;
				// 遍历
				for (var i = 0; i < newCarts.length; i++) {
					newCarts[i].selected = selectedAllStatus.value;
				}
				carts.value = newCarts;
				sum();
			}
			
			const bindCheckout = () => {
				uni.navigateTo({
					url: '/pages/mall/account/order/checkout/checkout'
				});
			}
			
			const sum = () => {
				var newCarts = carts.value;
				// 计算总金额
				var newTotal = 0;
				for (var i = 0; i < newCarts.length; i++) {
					if (newCarts[i].selected) {
						newTotal += newCarts[i].quantity * newCarts[i].goods.price;
					}
				}
				
				// 写回经点击修改后的数组
				carts.value = newCarts;
				total.value = newTotal.toFixed(2);
			}
			
			return { //setup函数返回值为一个对象
				carts,
				minusStatuses,
				selectedAllStatus,
				total,
				startX,
				itemLefts,
				showGoods,
				touchStart,
				touchMove,
				touchEnd,
				bindCheckbox,
				bindMinus,
				bindManualTapped,
				bindManual,
				bindPlus,
				deleteClick,
				bindCheckout,
				bindSelectAll,
				sum
			}
		}
	}
</script>

<style>
	/*外部容器*/
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
	} 
	
	/*整体列表*/
	.carts-list {
		display: flex;
		flex-direction: column;
		padding-left: 40rpx;
		margin-bottom: 110rpx;
	}
	
	/*每行单元格*/
	.carts-item {
		display: flex;
		flex-direction: row;
		height:150rpx;
		/*width属性解决标题文字太短而缩略图偏移*/
		width:100%;
		border-bottom: 1px solid #eee;
		padding: 30rpx 0;
		margin-right: 40rpx;
		position: absolute;
		top: 0;
		left: 0;
		background: white;
		z-index: 99;
	}
	
	/*item与button的容器*/
	.carts-container {
		position: relative;
		width: 100%;
		height: 180rpx;
	}
	
	/*左部图片*/
	.carts-image {
		width:150rpx;
		height:150rpx;
	}
	
	
	/*右部描述*/
	.carts-text {
		margin-left: 10rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	/*右上部分标题*/
	.carts-title {
		padding-right: 30rpx;
		font-size: 28rpx;
		color: #444;
		line-height: 38rpx;
		overflow: hidden;  
		text-overflow: ellipsis; 
		display: -webkit-box;  
		-webkit-line-clamp: 2;  
		-webkit-box-orient: vertical; 
	}
	
	/*右下部分价格与数量*/
	.carts-subtitle {
		font-size: 26rpx;
		padding-right:30rpx;
		display: flex;
		flex-direction: row;
		justify-content:space-between;
		align-items: center;
	}
	
	/*价格*/
	.carts-price {
		color: #f60;
	}
	
	/*人民币符号*/
	.carts-price:before, .select-and-amount text:last-child:before {
		content: '￥';	
	}
	
	/*商品加减按钮*/
	/*stepper容器*/
	.stepper {
		border: 1px solid #ccc;
		border-radius: 6rpx;
		width: 140rpx;
		height: 52rpx;
		margin:0 auto;
	}
	
	
	/*加号与减号*/
	.stepper text {
		width: 38rpx;
		line-height: 52rpx;
		text-align: center;
		float: left;
	}
	
	/*数值*/
	.stepper input {
		color: black;
		float: left;
		margin: 0 auto;
		width: 60rpx;
		height: 52rpx;
		text-align: center;
		font-size: 24rpx;
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;
	}
	
	/*普通样式*/
	.stepper .normal{
		color: black;
	}
	
	/*禁用样式*/
	.stepper .disabled{
		color: #ccc;
	}
	
	/*复选框样式*/
	.carts-list icon {
		margin-top: 60rpx;
		margin-right: 20rpx;
	}
	
	/*底部按钮*/
	.carts-footer {
		width: 100%;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		position: fixed;
		/* #ifdef MP-WEIXIN */
		bottom: 0px;
		/* #endif */
		/* #ifndef MP-WEIXIN */
		bottom: 50px;
		/* #endif */
		border-top: 1px solid #eee;
		background: white;
		z-index: 999;
	}
	
	.select-and-amount {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	/*全选字样*/
	.carts-footer text {
		font-size: 30rpx;
		margin-left: 8rpx;
		/*line-height: 10rpx;*/
		display: block;
	}
	
	/*立即结算按钮*/
	.carts-footer .button {
		line-height: 80rpx;
		text-align: center;
		width:220rpx;
		height: 80rpx;
		background-color: #f60;
		color: white;
		font-size: 36rpx;
		border-radius: 0;
		border: 0;
	}
	
	/*删除按钮*/
	.carts-footer .delete {
		height: 80rpx;
		width: 200rpx;
		text-align: right;
		line-height: 80rpx;
		color: #fc9326;
	}
	
	/*删除按钮*/
	.delete-button {
		width: 120rpx;
		font-size: 32rpx;
		height: 99%;
		line-height: 180rpx;
		border: 0;
		border-radius: 0;
		position: absolute;
		right: 0;
		top: 0;
	}
	
	.delete-button:before {
		border: 0;
	}
</style>